﻿<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">  
   
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> 
<title>de</title>
</head>
<body>
<div id="di"> <div class="alert alert-primary" role="alert" id ="b1"></div>
    <div  class="alert alert-danger" role="alert" id="lo">+</div>
    <div class="alert alert-warning" role="alert" id ="b2"></div>
    <div class="alert alert-warning" role="alert" id ="b21">=</div>
    <div  class="p-3 mb-2 bg-success text-white" id="end"> </div></div> 
    <audio id="musi" src="./p.mp3"></audio>
    <style>
        #numm{width: 150px;
        height: 150px;
     position: relative;
        font-size: 200%;
        flex-wrap:wrap;
        top:200px;
        left:90%;

        }
        #di{
            height: 280px;
            width: 200px;
            text-align: center;
            font-size: 200%;
        }
        #di{
            position: relative;
            left: 30%;
       
        }
        #lo{
            flex-wrap: nowrap;
            
        }
        #deld{
            position: absolute;
            bottom:20px;
            right:20%;
        }
    </style>
    <div class="btn-group" role="group" aria-label="Basic example" >
        <div id="numm"><button type="button" class="btn btn-secondary">1</button>
        <button type="button" id="seven" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
        <button type="button" class="btn btn-secondary">8</button>
        <button type="button" class="btn btn-secondary">9</button>
        <button type="button" class="btn btn-secondary">0</button></div>
        
      </div>
      <button type="button" class="btn btn-dark" id="deld">删除</button>
    <div>
        <script>as=document.getElementById("musi");
        
        do{
            a=Math.floor(Math.random()*20+1);
            a1=Math.floor(Math.random()*10+1);
            a2=a-a1;}
            while (a2<0);
            $("#deld").click(function(){$("#end").html("")})
            $("button.btn.btn-secondary").click(
                function(){
                    var v="00"
                   var v=$(this).html();
                  
                   
                    if (a<10){
                        if (v!=a)
                    {
                        $("#end").html("答错了"); 
                    }else {
                        $("#end").html(v);
                        as.load();
                        as.play();
                        window.location.reload()}

                    }else{

 
n2=$("#end").html(); 
$("#end").html(v);
console.log(n2)

enn=n2+v;
$("#end").html(enn); 
if(enn==a){as.load();
    as.play();
    location.reload()}
else if(enn!=a&enn>9){
    $("#end").html("答错了"); 
}



                    }
                    

                }
            )

           $("#b1").html(a1) 
           $("#b2").html(a2)
           


        </script>
    </div>

</body>
</html>